<template>
	<div>
		<div :style="{ height: showMobile ? '61px' : '' }"></div>
		<!-- 轮播图区域 -->
		<div class="bg-carousel" style="width: 100%;overflow: hidden;position: relative;">
			<!-- 轮播内容容器 -->
			<div class="carousel-wrapper" :style="{
				transform: `translateX(-${currentIndex * 100}%)`,
				transition: 'transform 0.5s ease',
				display: 'flex',
				width: `${carouselData.length * 100}%`
			}">
				<!-- 轮播项 - 循环渲染数据 -->
				<div v-for="(item, index) in carouselData" :key="index" class="bg-item" 
					:style="{
						height: showMobile ? '136px' : '700px',
						backgroundImage: `url(${item.bgImage})`
					}">
					<div :style="{ height: showMobile ? '10px' : '230px' }"></div>
					<div :class="showMobile ? 'bg-mobile' : 'bg-m'">
						<div style="font-weight: 800; text-align: left;color: #fff;" :style="{
							'font-size': showMobile ? '14px' : '40px',
							'height': showMobile ? '20px' : '50px',
							'line-height': showMobile ? '20px' : '50px'
						}">
							{{ item.title }}
						</div>
						<div style="text-align: left;color:#fff;" :style="{
							'font-size': showMobile ? '10px' : '16px',
							'margin-top': showMobile ? '10px' : '40px'
						}">
							<p>{{ item.desc1 }}</p>
							<p>
								{{ item.desc2 }}
								<span style="color:#ea5514;padding-left:5px;font-weight:800;"
									:style="{ 'font-size': showMobile ? '0.1rem' : '18px' }">
									{{ item.highlightText }}
								</span>
							</p>
						</div>
						<div style="width:100%;height:50px;display: flex;align-items: center;justify-content: left;margin-top:20px;"
							:style="{ 'margin-top': showMobile ? '10px' : '20px' }">
							<butings :title="item.btnText" @click="onpath(item.btnAction)"></butings>
						</div>
					</div>
				</div>
			</div>

			<!-- 轮播指示器 -->
			<div class="carousel-indicators" :style="{
				position: 'absolute',
				bottom: showMobile ? '10px' : '30px',
				left: '50%',
				transform: 'translateX(-50%)',
				display: 'flex',
				gap: '8px'
			}">
				<button v-for="(item, index) in carouselData" :key="index" :style="{
					width: showMobile ? '6px' : '10px',
					height: showMobile ? '6px' : '10px',
					borderRadius: '50%',
					border: 'none',
					backgroundColor: index === currentIndex ? '#fff' : 'rgba(255,255,255,0.5)',
					cursor: 'pointer'
				}" @click="currentIndex = index"></button>
			</div>

			<!-- 左右箭头 (仅桌面显示) -->
			<button v-if="!showMobile" class="carousel-arrow prev" :style="{
				position: 'absolute',
				left: '20px',
				top: '50%',
				transform: 'translateY(-50%)',
				width: '45px',
				height: '90px',
				backgroundColor: 'rgba(0,0,0,0.3)',
				color: 'white',
				border: 'none',
				borderRadius: '10%',
				cursor: 'pointer',
				fontSize: '20px'
			}" @click="prevSlide">&lt;</button>

			<button v-if="!showMobile" class="carousel-arrow next" :style="{
				position: 'absolute',
				right: '20px',
				top: '50%',
				transform: 'translateY(-50%)',
				width: '45px',
				height: '90px',
				backgroundColor: 'rgba(0,0,0,0.3)',
				color: 'white',
				border: 'none',
				borderRadius: '10%',
				cursor: 'pointer',
				fontSize: '20px'
			}" @click="nextSlide">&gt;</button>
		</div>
		<!-- 原有累计数据区域 -->
		<div class="leiji" :style="{ height: showMobile ? '160px' : '440px' }">
			<div :class="showMobile ? 'leiji-mainmoile' : 'leiji-main'">
				<div :style="{ 'height': showMobile ? '10px' : '60px' }"></div>
				<div class="flex-r flex-j">
					<div style="font-weight: 100;color: black;"
						:style="{ 'font-size': showMobile ? '16px' : '40px', 'letter-spacing': showMobile ? '0px' : '8px', }">
						累计为
					</div>
					<div class="flex-r">
						<div class="font" v-for="(items, index) in numberLISTs" :key="index">
							<AnimatedNumber v-if="!showfont" :duration="1000" :from="99" :to="items.val">
								<template #default="{ option, item }">
									<div v-if="onstring(item.number)">{{ onstring(item.number) }}</div>
								</template>
							</AnimatedNumber>
							<span v-if="showfont">{{ items.val }}</span>
						</div>
					</div>
					<div style=" font-weight: 100;color: black;"
						:style="{ 'font-size': showMobile ? '16px' : '40px', 'letter-spacing': showMobile ? '0px' : '8px', }">
						位消费者提供天然白桦树汁健康饮品</div>
				</div>
				<div class="numbers_text">
					<p>天桦生物科技，专注100%天然白桦树汁，为健康生活赋能</p>
					<p>倡导自然养生，天桦生物科技让白桦树汁走进千家万户</p>
					<p>天桦至纯，汁始健康。</p>
				</div>
				<div class="numbers_show">
					<div class="numbers_show_text">
						<div>
							<p class="numbers_show_text_p">150<span class="numbers_show_text_span1">+</span><span
									class="numbers_show_text_span2">个</span></p>
						</div>
						<div><span class="numbers_show_text_span3">合作单位</span></div>
					</div>

					<div class="numbers_show_text">
						<div>
							<p class="numbers_show_text_p">13<span class="numbers_show_text_span1">个</span><span
									class="numbers_show_text_span2">省</span></p>
						</div>
						<div><span class="numbers_show_text_span3">覆盖面积</span></div>
					</div>

					<div class="numbers_show_text">
						<div>
							<p class="numbers_show_text_p">1032<span class="numbers_show_text_span1"></span><span
									class="numbers_show_text_span2">万人</span></p>
						</div>
						<div><span class="numbers_show_text_span3">累计服务</span></div>
					</div>

					<div class="numbers_show_text">
						<div>
							<p class="numbers_show_text_p"><span class="numbers_show_text_span1" id="days">1757</span><span
									class="numbers_show_text_span2">份</span>
							</p>
						</div>
						<div><span class="numbers_show_text_span3">品质见证</span></div>
					</div>
				</div>
			</div>
		</div>
		<div :style="{ 'height': showMobile ? '16px' : '70px' }"></div>
		<!-- 产品介绍区域 -->
		<div class="flex-c" :style="{ 'height': showMobile ? '242px' : '591px' }">
			<div class="flex-c flex-a">
				<div style="font-size: 30px;font-weight: 600;" :style="{ 'font-size': showMobile ? '22px' : '30px' }">产品介绍
				</div>
				<div v-if="!showMobile" style="width: 35px;height: 2px;background-color: black;margin-top: 10px;"></div>
			</div>
			<div :style="{ 'height': showMobile ? '30px' : '50px' }"></div>
			<div class="flex-r flex-sp" style="margin: 0 auto;box-sizing: border-box;"
				:style="{ 'width': showMobile ? '96%' : '1200px', 'height': showMobile ? '100px' : '312px', 'padding': showMobile ? '10px' : '' }">
				<div class="is-cur" style="height: 100%;text-align: center;"
					:style="{ 'width': showMobile ? '100px' : '360px' }"
					v-for="(item, index) in productList.slice(0, showMobile ? 3 : 3)" :key="index" @click="onurl(2, index)">
					<div class="canpin"
						:style="{ 'height': showMobile ? '70px' : '240px', 'width': showMobile ? '100%' : '100%' }">
						<img :src="item.image" alt="">
					</div>
					<p style="color: #666;"
						:style="{ 'font-size': showMobile ? '10px' : '', 'margin': showMobile ? '' : '20px' }">
						{{ item.title }}
					</p>
				</div>
			</div>
			<div class="flex flex-j" style="width:100%;height: 40px;"
				:style="{ 'margin-top': showMobile ? '20px' : '35px' }">
				<butings title="点击更多" @click="onpath(2)"></butings>
			</div>
		</div>
		<!-- 应用案例区域 -->
		<div style="width: 100%;background-color: #F4F7FC;" class="bg-can"
			:style="{ 'height': showMobile ? '484px' : '642px' }">
			<div style="height: 100%;margin: 0 auto;" :style="{ 'width': showMobile ? '100%' : '1200px' }">
				<div :style="{ 'height': showMobile ? '16px' : '70px' }"></div>
				<div class="flex-c flex-a">
					<div style="font-size: 30px;font-weight: 600;" :style="{ 'font-size': showMobile ? '22px' : '30px' }">
						天桦生物科技应用案例
					</div>
					<div v-if="!showMobile" style="width: 35px;height: 2px;background-color: black;margin-top: 10px;">
					</div>
				</div>
				<div :style="{ 'height': showMobile ? '16px' : '60px' }"></div>
				<div style="height: 370px; width: 100%;" :style="{ 'height': showMobile ? '416px' : '370px' }">
					<banner v-if="!showMobile" :bannerData="applicationList.slice(0, 5)" @onurl="onurl" :interval="3000"
						:height="'370px'">
					</banner>
					<banners v-else :bannerData="applicationList.slice(0, 5)" @onurl="onurl" :interval="3000"
						:height="'416px'">
					</banners>
				</div>
			</div>
		</div>
		<!-- 公司简介区域 -->
		<div :style="{ 'height': showMobile ? '' : '634px' }">
			<div style="height: 100%;margin: 0 auto;" :style="{ 'width': showMobile ? '100%' : '1200px' }">
				<div :style="{ 'height': showMobile ? '16px' : '70px' }"></div>
				<div class="flex-c flex-a">
					<div style="font-size: 30px;font-weight: 600;" :style="{ 'font-size': showMobile ? '22px' : '30px' }">
						公司简介
					</div>
					<div v-if="!showMobile" style="width: 35px;height: 2px;background-color: black;margin-top: 10px;">
					</div>
				</div>
				<div :style="{ 'height': showMobile ? '16px' : '50px' }"></div>
				<div :class="showMobile ? 'gongsi' : ''"
					:style="{ 'width': showMobile ? '100%' : 'calc(1300px - 500px)', 'font-size': showMobile ? '10px' : '14px', 'line-height': showMobile ? '' : '25px', 'padding': showMobile ? '10px 20px' : '', 'height': showMobile ? '100px' : '140px', 'line-height': showMobile ? '18px' : '' }"
					style="margin: 0 auto;color: #666;box-sizing: border-box;">
					黑龙江天桦生物科技有限公司，在北纬49°的黑龙江大地强势落子，这里资源富集，公司坐拥得天独厚的桦树汁资源优势。公司斥资4000万元，项目占地规模达11785.3平方米。
					其中，标准化生产车间含原辅包库房共计6079.3平方米，配套2条现代化果汁生产线；另有468平方米的丁类库房。
					北纬49°的纯净自然环境，孕育出的桦树汁品质上乘、营养丰富、独具特色。天桦生物凭借对这一珍贵资源的独家开发权，
					运用先进科技手段精心萃取，最大程度保留了桦树汁的天然活性成分与有益物质。
					在研发与生产环节，公司严格遵循国际高标准，从源头采集到成品出厂，层层把控质量。专业的科研团队不断探索创新，致力于深度挖掘桦树汁的价值
					，并将其广泛应用于健康饮品、美容护肤、营养保健品等多个领域。以桦树汁为核心，天桦生物打造出一系列极具竞争力的产品，成功在市场中脱颖而出，引领行业发展潮流，
					为消费者带来源于自然的高品质健康体验。
				</div>

				<div style="height: 20px;"></div>
				<div class="flex flex-j" style="width:100%;height: 40px;">
					<butings title="查看详情" @click="onpath(1)" style="margin: 0 auto;"></butings>
				</div>
				<div class="clear" style="width:100%;" :style="{ 'height': showMobile ? '320px' : '250px' }">
					<div style="height:100%;margin:0 auto;display:flex;"
						:style="{ 'width': showMobile ? '100%' : '1200px', 'justify-content': showMobile ? '' : 'space-between', 'flex-direction': showMobile ? 'column' : '' }">

						<div v-for="(item, index) in gongsi" style="height:100%;display:flex;align-items:center;"
							:style="{ 'width': showMobile ? '100%' : '30%', 'border-bottom': showMobile ? '1px solid #dedede' : '', 'padding-bottom': showMobile ? '15px' : '', 'margin-top': showMobile ? '10px' : '' }">
							<div style="height:80px;width:100%;display:flex;padding-left: 30px;box-sizing: border-box;"
								:style="{ 'padding-left': showMobile ? '20px' : '30px', 'padding-right': showMobile ? '20px' : '' }">
								<div :style="{ 'width': showMobile ? '30px' : '70px', 'height': showMobile ? '25px' : '60px', 'font-size': showMobile ? '10px' : '34px', 'line-height': showMobile ? '25px' : '60px', 'border-radius': showMobile ? '5px' : '10px' }"
									style="font-weight:800;border:2px solid #0244D6;text-align:center;margin-right:10px;color:#0244D6;margin-top: 12px;">
									0{{ index + 1 }}
								</div>
								<div style="height:100%;width:100%;">
									<p style="font-size: 18px;line-height: 30px;">{{ item.title }}</p>
									<p style="line-height:16px;font-size: 12px;">
										{{ item.text }}
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 新闻动态区域 -->
		<div style="background-color: #F5F8FD;" :style="{ 'height': showMobile ? '600px' : '658px' }">
			<div style="height: 100%;margin: 0 auto;" :style="{ 'width': showMobile ? '100%' : '1200px' }">
				<div :style="{ 'height': showMobile ? '16px' : '70px' }"></div>
				<div class="flex-c flex-a">
					<div style="font-size: 30px;font-weight: 600;" :style="{ 'font-size': showMobile ? '22px' : '30px' }">
						新闻动态
					</div>
					<div v-if="!showMobile" style="width: 35px;height: 2px;background-color: black;margin-top: 10px;">
					</div>
				</div>
				<div :style="{ 'height': showMobile ? '16px' : '50px' }"></div>
				<div style="width: 100%;" class="flex-r flex-sp flex-w"
					:style="{ 'height': showMobile ? '480px' : '401px' }">
					<div class=" is-cur " :class="showMobile ? 'borings' : 'boring'"
						v-for="(item, ins) in newList.slice(0, 4)" @click="onurl(4, item.id)">
						<div class="flex-r is-hb">
							<div>
								<p :style="{ 'font-size': showMobile ? '13px' : '', 'color': showMobile ? '#999' : '' }">{{
									item.title }}
								</p>
								<p style="font-size: 12px;color: #999;" :style="{ 'margin-top': showMobile ? '' : '10px' }">
									{{ item.desc }}</p>
							</div>
							<div class="flex flex-end flex-a" style="width: 100px;height: 100%;">
								<div class=" flex flex-j flex-a"
									style="width: 28px;height: 28px;border-radius: 100%;border: 1px solid #e7e7e7;">
									<img src="@/assets/img/icorr.png" alt="">
								</div>
							</div>
						</div>

						<div class="boring-tb"></div>
						<div class="boring-tr"></div>
						<div class="boring-bl"></div>
						<div class="boring-bt"></div>

					</div>
				</div>
				<div class="flex flex-j" style="width:100%;height: 40px;">
					<butings title="查看更多" @click="onpath(4)" style="margin: 0 auto;"></butings>
				</div>
				<div :style="{ 'height': showMobile ? '20px' : '' }"></div>
			</div>
		</div>
		<!-- 合作伙伴区域 -->
		<div style="min-height: 175px;background-color: #fff;">
			<div v-if="!showMobile" class="buju  flex-j" style="padding-top: 10px;">
				<banner2 :state="state"></banner2>
			</div>
			<div v-else class="is-wb" style="min-height: 100px;">
				<div class="flex-c flex-a">
					<div style="font-size: 30px;font-weight: 600;padding: 20px;"
						:style="{ 'font-size': showMobile ? '22px' : '30px' }">合作伙伴</div>
				</div>
				<div class="flex flex-sp flex-w" style="padding:10px;">
					<div class="" style="width: 30%;height: 80px;margin-bottom: 10px;border: 1px solid #e5e5e5;"
						v-for="(item, index) in state.progressList">
						<img class="is-img" :src="item.url" alt="">
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script lang="ts" setup>
import butings from '@/components/buting.vue'
import banner from '@/components/banner.vue'
import banners from '@/components/banners.vue'
import banner2 from '@/components/banner2.vue'
import useAppStore from '@/store/modules/home'
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 轮播数据
const carouselData = ref([
	{
		title: "白桦星空·星酿原液",
		desc1: "在北纬49°的寒地森林，白桦树历经极寒与星光淬炼，树汁中蕴藏惊人的修护能量。我们以低温萃取技术，",
		desc2: "将这份‘星空馈赠’凝于瓶中，",
		highlightText: "为你点亮肌肤的璀璨之源。",
		btnText: "联系我们",
		btnAction: 5,
		bgImage: new URL('@/assets/img/baihuashuzhi.jpg', import.meta.url).href
	},
	{
		title: "白桦精华·天然呵护",
		desc1: "源自原始森林的纯净馈赠，每一滴都凝聚自然的力量，",
		desc2: "采用古法工艺结合现代科技，",
		highlightText: "带给你最本真的呵护。",
		btnText: "了解更多",
		btnAction: 2,
		bgImage: new URL('@/assets/img/th-chanpin3.jpg', import.meta.url).href
	},
	{
		title: "极地臻品·限量发售",
		desc1: "全年仅一次的采集期，只为保留最纯净的营养成分，",
		desc2: "限量供应的珍稀原液，",
		highlightText: "献给懂生活的你。",
		btnText: "立即抢购",
		btnAction: 3,
		bgImage: new URL('@/assets/img/th-chanpin2.jpg', import.meta.url).href
	}
]);

// 轮播控制
const currentIndex = ref(0);
const carouselTimer = ref(null);

// 下一张
const nextSlide = () => {
	currentIndex.value = (currentIndex.value + 1) % carouselData.value.length;
};

// 上一张
const prevSlide = () => {
	currentIndex.value = (currentIndex.value - 1 + carouselData.value.length) % carouselData.value.length;
};

// 自动轮播
const startCarousel = () => {
	carouselTimer.value = setInterval(nextSlide, 5000); // 5秒切换一次
};

// 停止轮播
const stopCarousel = () => {
	if (carouselTimer.value) {
		clearInterval(carouselTimer.value);
	}
};

// 原有页面方法
const onurl = (i: any, type: any) => {
	useAppStore().showindexing(i)
	useAppStore().onshowi(type)
	useAppStore().onshowdel(true)
	document.body.scrollTop = 0
	document.documentElement.scrollTop = 0
	if (i == 3) {
		useAppStore().onshowdel(false)
		useAppStore().onapplicationindex(type)
	}
	if (i == 4) {
		useAppStore().onshowdel(false)
		useAppStore().onnewid(type)
	}
}

const gongsi = ref([
	{
		title: '研发团队',
		text: '这支来自黑龙江的研发团队，用他们的专业、执着与热爱，诠释了对家乡资源的珍视和对健康事业的追求。他们是黑龙江科技创新的骄傲，也为推动黑龙江省特色资源产业发展贡献着自己的力量。',
	},
	{
		title: '行业经验',
		text: '公司 2023 年于孙吴县成立，团队在白桦树汁领域经验深厚。核心成员早有积累，深耕天然植物提取，参与过孙吴县白桦树汁原料调研，熟悉本地资源；研发上与黑龙江农林科研机构协作，把控浓缩工艺与营养留存；还经前期市场探索，洞察需求。借专业积累，为年轻公司筑牢行业根基 ，若需聚焦某业务场景细化，可补充调整 。',
	},
	{
		title: '服务完善',
		text: '售前，专业客服深度讲产品、按需分析；售中，线上线下多渠道购，订单可跟踪，物流配送灵活；售后，质量问题无条件退换，24 小时响应反馈，会员享专属健康资讯与活动 。',
	}
])

const {
	productList,
	applicationList,
	newList,
	showMobile
} = defineProps({
	productList: { // 产品
		type: Array,
		default: () => {
			return []
		}
	},
	applicationList: { // 应用
		type: Array,
		default: () => {
			return []
		}
	},
	newList: { // 新闻
		type: Array,
		default: () => {
			return []
		}
	},
	showMobile: { // 移动端
		type: Boolean,
		default: false
	},

})

const onstring = (val: any) => {
	return val[1]
}

const onpath = async (i: any) => {
	useAppStore().showindexing(i)
	document.body.scrollTop = 0
	document.documentElement.scrollTop = 0
}

const state = reactive({
	progressList: [
		{
			type: "1",
			url: new URL('@/assets/img/yushan01.jpg', import.meta.url).href
		}
	],
	currentProgressId: "",
	scrollResultWidth: 0, //transform滚动的距离
	signleWidth: 215, //单个流程的宽度
	activeName: 0,
	currentClickNumber: 0,
	noScrollRight: true
});

const numberLISTs = ref([{
	val: '1'
}, {
	val: '3'
}, {
	val: '6'
}, {
	val: '5'
}, {
	val: '2'
}, {
	val: '6'
}])

const showfont = ref(false)

// 生命周期
onMounted(() => {
	setTimeout(() => {
		showfont.value = true
	}, 1000)
	startCarousel();
});

onUnmounted(() => {
	stopCarousel();
});
</script>

<style lang="scss" scoped>
$color: #ea5514;
$width: 1200px;

// 轮播图样式优化
.bg-carousel {
	.carousel-wrapper {
		// 轮播容器样式已通过内联样式定义
	}

	.carousel-indicators {
		button {
			transition: backgroundColor 0.3s ease;
		}
	}

	.carousel-arrow {
		transition: backgroundColor 0.3s ease;

		&:hover {
			backgroundColor: rgba(0, 0, 0, 0.5);
		}
	}

	// 轮播项样式优化
	.bg-item {
		width: 100%;
		flex-shrink: 0;
		background-position: center; // 图片居中显示
		background-size: cover; // 保持比例覆盖容器，避免拉伸
		background-repeat: no-repeat; // 禁止重复平铺

		.bg-m {
			width: $width;
			min-height: 100px;
			margin: 0 auto;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.bg-mobile {
			width: 100%;
			min-height: 100px;
			padding: 0 20px;
			box-sizing: border-box;
		}
	}

	// 响应式高度调整
	@media (max-width: 768px) {
		.bg-item {
			height: 200px !important; // 移动端强制限制最大高度
		}
	}

	@media (min-width: 1200px) {
		.bg-item {
			height: 600px !important; // 大屏固定高度
		}
	}
}

.number-item {
	width: 50px;
	background-color: red;

	&>span {
		position: relative;
		display: inline-block;
		margin-right: 10px;
		width: 100%;
		height: 100%;
		writing-mode: vertical-rl;
		text-orientation: upright;
		overflow: hidden;

		&>i {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
			transition: transform 0.5s ease-in-out;
			letter-spacing: 10px;
		}
	}
}

.gongsi {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 6; //行数
	line-clamp: 6;
	-webkit-box-orient: vertical;
	color: #6d6161;
}

.leiji {
	width: 100%;
	background-image: url('@/assets/img/leiji.png');
	background-size: 100% 100%;
	position: relative;

	.leiji-main {
		width: 1200px;
		height: 100%;
		margin: 0 auto;

		.font {
			font-size: 40px;
			background-color: #0244D6;
			color: white;
			font-weight: 100;
			margin: 0 3px;
			display: inline-block;
			width: 36px;
			height: 58px;
			line-height: 58px;
			text-align: center;
		}

		.numbers_text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #6d6161;
			font-size: 20px;
			margin-top: 40px;
		}

		.numbers_show {
			height: 150px;
			display: flex;
			justify-content: space-around;
			margin-top: 70px;
		}

		.numbers_show_text_p {
			font-size: 36px;
			font-weight: 400;
			color: #0244D6;
		}

		.numbers_show_text_span2 {
			font-size: 18px;
			color: #6d6161;
		}
	}

	.leiji-mainmoile {
		width: 100%;
		height: 100%;
		margin: 0 auto;

		.font {
			font-size: 16px;
			background-color: #0244D6;
			color: white;
			text-align: center;
			margin: 0 2px;
			display: inline-block;
			width: 15px;
			height: 21px;
			line-height: 21px;
			text-align: center;
		}

		.numbers_text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #6d6161;
			font-size: 10px;
			line-height: 20px;
			margin-top: 10px;
		}

		.numbers_show {
			min-height: 10px;
			display: flex;
			justify-content: space-around;
			margin-top: 10px;
		}

		.numbers_show_text_p {
			font-size: 14px;
			font-weight: 400;
			color: #0244D6;
		}

		.numbers_show_text_span2 {
			font-size: 10px;
			color: #6d6161;
		}

		.numbers_show_text_span3 {
			font-size: 14px;
		}
	}
}

.leiji-mobile {
	height: 160px;
	width: 100%;
	background-image: url('@/assets/img/leiji.png');
	background-size: 100% 100%;
}

.canpin {
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		transition: 1s;
	}

	&:hover {
		img {
			transform: scale(1.2, 1.2);
		}
	}
}

.bg-can {
	
	background-image: url('@/assets/img/bg-can.jpg');
	background-size: 100% 100%;
}

.borings {
	width: 100%;
	height: 110px;
	padding: 0px 6px 0px 18px;
	box-sizing: border-box;
	line-height: 20px;
	position: relative;
	border-bottom: 1px solid #ececec;
}

.boring {
	width: 565px;
	height: 152px;
	padding: 40px 25px;
	box-sizing: border-box;
	line-height: 20px;
	border: 2px solid #e7e7e7;
	position: relative;

	.boring-tb {
		position: absolute;
		top: -2px;
		left: -2px;
		width: 2px;
		height: 0;
		background-color: #0244D6;
	}

	.boring-tr {
		position: absolute;
		top: -2px;
		left: 0;
		width: 0px;
		height: 2px;
		background-color: #0244D6;
	}

	.boring-bl {
		position: absolute;
		right: -2px;
		width: 0px;
		height: 2px;
		bottom: -2px;
		background-color: #0244D6;
	}

	.boring-bt {
		position: absolute;
		right: -2px;
		width: 2px;
		height: 0px;
		bottom: 0;
		background-color: #0244D6;
	}

	&:hover {
		.boring-tb {
			height: calc(100% + 4px);
			transition: 500ms;
		}

		.boring-tr {
			transition: 500ms;
			width: 100%;
		}

		.boring-bl {
			width: calc(100% + 4px);
			transition: 500ms;
		}

		.boring-bt {
			height: calc(100% + 2px);
			transition: 500ms;
		}
	}
}
</style>